@import '../../../style/var';

page {
  background: #212121;
  height: 100%;
}

.card-record {
  position: relative;
  width: 100%;
  // height: 100vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #212121;
  overflow-x: hidden;

  .card-record-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // height: calc(100% + 150px);
    z-index: 20;
    background-color: black;
    opacity: 0.8;
    background-clip: content-box;
  }

  .scroll_view {
    width: 100%;
    position: relative;
    /* 设置宽度 */
    height: calc(100% - 150px);
    overflow: hidden;
  }

  .share-remind {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 35%;
    z-index: 30;

    .share-remind-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }

    .share-remind-h1 {
      position: absolute;
      width: 100%;
      top: 13%;
      font-size: 44px;
      text-align: center;
      align-items: center;
      justify-content: center;
      z-index: 31;
    }

    .share-remind-h2 {
      position: absolute;
      width: 90%;
      top: 41%;
      transform: translate(-50%, -50%);
      left: 55%;
      font-size: 28px;
      line-height: 40px;
      font-weight: 200;
      text-align: left;
      align-items: center;
      justify-content: center;
      z-index: 31;
    }

    .share-remind-action {
      position: absolute;
      width: 70%;
      font-size: 38px;
      line-height: 70px;
      font-family: "Microsoft YaHei";
      font-weight: 400;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      align-items: center;
      justify-content: center;
      background: none;
    }

    .share-remind-action-confirm {
      bottom: 100px;
      color: #f4d0b2;
      letter-spacing: 3px;
      background-color: #000;
    }

    .share-remind-action-cancle {
      bottom: 10px;
      color: #000;
      letter-spacing: 5px;
      border: 1px solid #000;
    }
  }

  .top-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    background-color: #212121;

    .header {
      display: flex;
      width: 750px;
      height: 80px;
      background: rgb(8, 7, 7);


      .header-box {
        flex: 1;
        line-height: 80px;
        text-align: center;
        position: relative;

        .content {
          display: inline-block;
          line-height: 80px;
          font-size: 30px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgb(255, 255, 255);
          letter-spacing: 1px;
        }

        .active {
          &:before {
            position: absolute;
            content: '';
            width: 80%;
            margin: 0 auto;
            left: 10%;
            bottom: 0;
            height: 8px;
            color: #f4d0b2;
            background: #f4d0b2;
          }

          color: #f4d0b2;
        }
      }
    }
  }

  .select-box {
    position: relative;
    justify-content: space-between;
    width: 100%;
    height: 95px;
    font-size: 30px;
    font-family: PingFangSC;
    color: #f4d0b2;
    background-color: #212121;
    z-index: 20;

    .box_category {
      position: absolute;
      top: 25%;
      padding: 5px 20px;
    }

    .box_value {
      position: absolute;
      top: 25%;
      padding: 2px 30px;
      border: 2px solid #f4d0b2;
      border-radius: 25px;
      display: flex;
      align-items: center;

      .card_arrow_img {
        width: 15px;
        height: 20px;
        margin-left: 10px;
        margin-right: -15px;
      }
    }

    .active {
      color: #000;
      background-color: #f4d0b2;
    }
  }

  .card-list {
    position: relative;
    // top: 80px;
    left: 0;
    margin-bottom: 200px;
    height: 100%;
    // height: calc(100% - 100px);
    width: 100%;
    background-color: #212121;

    .card {
      position: relative;
      width: 100%;
      margin: 10px 20px;
      height: 250px;

      .card-line {
        display: relative;
        width: 95%;
        height: 240px;
        background: #212121;

        .card-bg {
          position: relative;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          letter-spacing: 1px;
          background: #212121;
          color: rgba(255, 255, 255, 1);
          z-index: 10;
        }

        .card-attr {
          position: absolute;
          top: 32px;
          left: 15px;
          font-size: 23px;
          transform: rotate(-37deg);
          font-family: "Microsoft YaHei";
          color: #513218;
          font-weight: 400;
          align-items: center;
          justify-content: center;
          letter-spacing: 4px;
          z-index: 10;
        }

        .card-name {
          position: absolute;
          top: 32%;
          left: 47%;
          transform: translate(-75%, -50%);
          font-family: "Microsoft YaHei";
          color: #513218;
          font-size: 44px;
          font-weight: 400;
          align-items: center;
          justify-content: center;
          letter-spacing: 1px;
          z-index: 10;
        }

        .card-des {
          position: absolute;
          top: 54%;
          left: 50%;
          transform: translate(-70%, -50%);
          font-family: "Microsoft YaHei";
          color: #513218;
          width: 400px;
          font-size: 24px;
          font-weight: 300;
          align-items: center;
          justify-content: center;
          letter-spacing: 1px;
          z-index: 10;
        }

        .card-validity {
          position: absolute;
          bottom: 3%;
          width: 80%;
          left: 42%;
          transform: translate(-53%, -50%);
          font-family: "Microsoft YaHei";
          color: #513218;
          font-weight: 300;
          font-size: 23px;
          text-align: center;
          align-items: center;
          justify-content: center;
          letter-spacing: 1px;
          z-index: 10;
        }

        .card-number {
          position: absolute;
          bottom: 3%;
          width: 30%;
          right: -8%;
          transform: translate(-50%, -50%);
          font-family: "Microsoft YaHei";
          font-weight: 300;
          color: #513218;
          font-size: 23px;
          text-align: center;
          align-items: center;
          justify-content: center;
          letter-spacing: 1px;
          z-index: 10;
        }

        .card-action {
          position: absolute;
          right: 10%;
          font-size: 30px;
          width: 170px;
          height: 60px;
          text-align: center !important;
          align-items: center !important;
          justify-content: center !important;
          letter-spacing: 1px;
          z-index: 10;
          color: #e7b394;
          font-weight: 100;
          background-color: #995f1d;
          border-radius: 10px;
          padding: 8px 10px !important;
          margin: 0 auto !important;
        }

        .card-action-shadow {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 11;
          background-color: #212121;
          opacity: 0.6;
        }

        .card-action2 {
          position: absolute;
          right: 10%;
          top: 25%;
          font-size: 30px;
          width: 170px;
          height: 60px;
          text-align: center !important;
          align-items: center !important;
          justify-content: center !important;
          letter-spacing: 1px;
          z-index: 10;
          color: #e7b394;
          font-weight: 100;
          background-color: #995f1d;
          border-radius: 10px;
          padding: 8px 10px !important;
          margin: 0 auto !important;
        }

        .card-action-button {
          display: flex;
          appearance: none !important;
          border: none !important;
        }

        .card-action-img {
          top: 9%;
          position: absolute;
          right: 10%;
          font-size: 30px;
          align-items: center;
          justify-content: center;
          letter-spacing: 1px;
          z-index: 11;
          width: 140px;
          height: 140px;
          border-radius: 10px;
        }
      }

      .icon {
        width: 30px;
        height: 30px;
        margin-right: 18px;
      }

      view,
      div {
        font-size: 28px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        letter-spacing: 1px;
      }
    }
  }
}


.empty-box {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;

  .empty {
    width: 130rpx;
    height: 150rpx;
  }

  .tip {
    margin-top: 30rpx;
    font-size: 34rpx;
    font-family: PingFangSC-Regular;
    letter-spacing: 1rpx;
    color: rgba(153, 153, 153, 1);
  }


}

.tabBar {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
}